<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cart Page</title>
    <script src="../client-lib/jquery-3.7.1.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>商城界面</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="assets/css/demo.css" rel="stylesheet">

</head>
<style>
    div 
    {
        table-layout: fixed;
        word-wrap: break-word;   
    }

    #cart-items>div
    {
        border: 1px solid #eaecf3;
        border-radius: 0.75rem;
        background-color: white;
        padding-top: 15px;
        box-shadow: 0 0 10px 2px #bdcee0;
        margin-left: 15px;
        margin-top: 20px;
        flex: 0 0 25%;
    }

    #cart-items>div>img
    {
        height: 140px;
    }

    #cart-items h5
    {
        text-align: center;
    }

    #cart-items button
    {
        background-color: orange;
        border: none;
    }

    #cart-items button:hover
    {
        cursor: pointer;
    }

    .box
    {
        width:100%;
        height:100vh;
        background-image: url('../img/cart_bg.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #back_main
    {
        position: absolute;
        right: 100px;
        top: 10px;
        color: black;
        font-size: 25px;
    }

    #back_main:hover
    {
        color: white;
    }
</style>
<body>

    <div class="box">
        <h1 style="text-align: center;">Shopping Cart</h1>
        <a href="main.html" id="back_main">回到首页</a>
        <div id="cart-items" class="row typeface-palette cols-xs-space cols-sm-space cols-md-space" style="display: flex;justify-content: center;margin-right: 0%;">
            <div class="col-sm-4">
                <img src="../upload/fc22257e-11cd-42c1-81b2-77de7039bd29.webp" alt="" style="object-fit: cover;">
                <h5 class="text-align:center;">${commodity.name}</h5>
                <p>价格：赛霸</p>
                <p>产地：浙江湖州</p>
                <p>种类：营养健康类</p>
                <p>生产日期：20245-25</p><button class="badge badge-md typeface-badge badge-pill text-white" id="shopping-cart" onclick="removeFromCart(${commodity.id})"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
                    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                </svg></button>
            </div>
            <div class="col-sm-4">
                <img src="../upload/95ae443b-b8d1-4960-abf9-21a6092d453f.webp" alt="" style="object-fit: cover;">
                <h5 class="text-align:center;">iphone 16</h5>
                <p>价格：8366</p>
                <p>产地：浙江湖州</p>
                <p>种类：营养健康类</p>
                <p>生产日期：20245-25</p><button class="badge badge-md typeface-badge badge-pill text-white" id="shopping-cart" onclick="removeFromCart(${commodity.id})"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
                    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                </svg></button>
            </div>
            <div class="col-sm-4">
                <img src="../upload/63875463-2c4e-40e2-afff-293ac8548f8b.jpg" alt="" style="object-fit: cover;">
                <h5 class="text-align:center;">${commodity.name}</h5>
                <p>价格：iphone 16</p>
                <p>产地：浙江湖州</p>
                <p>种类：营养健康类</p>
                <p>生产日期：20245-25</p><button class="badge badge-md typeface-badge badge-pill text-white" id="shopping-cart" onclick="removeFromCart(${commodity.id})"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
                    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                </svg></button>
            </div>
        </div>
    </div>
</body>

<script>
    $(document).ready(function()
    {
        $.ajax
        ({
            url: './cart/GetCart',
            method: 'GET',
            success: function(data) 
            {
                var cartItems = $('#cart-items');
                cartItems.empty();
                $.each(data,function(index,commodity){
                    cartItems.append(`<div class="col-sm-4" data-id=${commodity.id}>
                        <img src="../upload/${commodity.image}" alt="" style="object-fit: cover;">
                        <h5 style="text-align:center;">${commodity.name}</h5>
                        <p>价格：${commodity.price}</p>
                        <p>产地：${commodity.origin}</p>
                        <p>种类：${commodity.category}</p>
                        <p>生产日期：${commodity.productionDate}</p><button class="badge badge-md typeface-badge badge-pill text-white" id="shopping-cart" onclick="removeFromCart(${commodity.id})"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
                            <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                        </svg></button>
                    </div>`)                                   
                });
            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                    console.log('Error: ' + textStatus + ' - ' + errorThrown);
            }
        });
    });

    function removeFromCart(productId)
    {
        $.ajax({
            url: './cart/RemoveFromCart',
            method: 'POST',
            data: { id: productId },
            success: function() {
                location.reload(); // Reload the page to update the cart items
            }
        });
    }
</script>


<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/popper/popper.min.js"></script>
<script src="assets/js/bootstrap/bootstrap.min.js"></script>
<!-- FontAwesome 5 -->
<script src="assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
<!-- Page plugins -->
<script src="assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="assets/vendor/input-mask/input-mask.min.js"></script>
<script src="assets/vendor/nouislider/js/nouislider.min.js"></script>
<script src="assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
<!-- Theme JS -->
<script src="assets/js/theme.js"></script>
</html>
